import { Col, Row } from 'ant-design-vue'
import type { CSSProperties } from 'vue'

export default defineComponent({
	props: {
		/**
		 * 描述数据
		 */
		data: {
			type: Object,
			required: true
		},
		/**
		 * 所占的栅格
		 */
		span: {
			type: Number,
			default: 8,
			required: false
		},
		/**
		 * 标题
		 */
		title: {
			type: String,
			required: false
		},
		/**
		 * 描述字段等
		 */
		fields: {
			type: Array as PropType<DescFields>,
			required: true
		},
		/**
		 * 标题样式
		 */
		labelstyle: {
			type: Object as PropType<CSSProperties>,
			required: false,
			default: () => ({})
		},
		/**
		 * 内容样式
		 */
		valueStyle: {
			type: Object as PropType<CSSProperties>,
			required: false,
			default: () => ({})
		},
		/**
		 * 冒号
		 */
		colon: {
			type: Boolean,
			default: true
		}
	},
	setup(props, { slots }) {
		function renderLabel(label, data) {
			if (typeof label === 'function') {
				return label(data)
			} else {
				return label
			}
		}

		function renderValue(value, data, field) {
			if (typeof value === 'function') {
				return value(data)
			} else if (slots[field]) {
				return slots[field]?.()
			} else {
				return data[field] || value || '-'
			}
		}

		function renderTitle(title) {
			if (title || slots.title) {
				return (
					<div class="flex items-center justify-between mb-20">
						{slots.title?.() || <div class="text-16 font-bold">{title}</div>}
						{slots.extra?.()}
					</div>
				)
			} else {
				return null
			}
		}

		return function () {
			const { data, fields, span, title, labelstyle, valueStyle, colon } = props
			return (
				<div>
					{renderTitle(title)}
					<Row gutter={[10, 15]}>
						{fields.map((item, index) => {
							const { field, label, value } = item
							return (
								<Col
									span={item.span || span}
									key={index}
								>
									<div class="flex leading-1.5em">
										<div
											class="text-14 mb-5 flex color-#86909c flex-shrink-0"
											style={item.labelstyle || labelstyle}
										>
											{renderLabel(label, data)}
											{colon ? '：' : null}
										</div>
										<div
											class="flex-1"
											style={item.valueStyle || valueStyle}
										>
											{renderValue(value, data, field)}
										</div>
									</div>
								</Col>
							)
						})}
					</Row>
				</div>
			)
		}
	}
})
